<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园答疑助手 - 首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4361ee',
            secondary: '#3f37c9',
            accent: '#4895ef',
            success: '#4cc9f0',
            warning: '#f72585',
            light: '#f8f9fa',
            dark: '#212529'
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      }
      .question-card {
        @apply bg-white rounded-xl p-4 border border-gray-100 hover:border-primary/30 hover:shadow-md transition-all duration-300 cursor-pointer;
      }
      .course-item {
        @apply py-3 px-4 rounded-lg cursor-pointer transition-all hover:bg-primary/10 hover:text-primary;
      }
      .course-item.active {
        @apply bg-primary text-white;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <nav class="bg-white nav-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- 标题 -->
      <div class="flex items-center">
        <i class="fa fa-comments text-primary text-xl mr-2"></i>
        <h1 class="text-lg font-bold text-dark">校园答疑助手</h1>
      </div>

      <!-- 搜索框 -->
      <div class="hidden md:flex relative flex-1 max-w-md mx-8">
        <input type="text" placeholder="搜索课程、问题或知识点..." 
          class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:bg-white border border-transparent focus:border-gray-200 input-focus">
        <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
      </div>

      <!-- 用户区域 -->
      <div class="flex items-center gap-4">
        <button class="relative text-gray-500 hover:text-primary transition-colors">
          <i class="fa fa-bell text-lg"></i>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-warning rounded-full text-white text-xs flex items-center justify-center">3</span>
        </button>
        <div class="flex items-center gap-2">
          <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
          <span class="hidden md:inline text-sm font-medium">张同学</span>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
    <!-- 左侧课程列表 -->
    <div class="md:w-1/4 lg:w-1/5">
      <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h2 class="font-bold text-dark">我的课程</h2>
          <button class="text-primary hover:text-secondary text-sm">
            <i class="fa fa-plus"></i> 添加
          </button>
        </div>
        
        <div class="space-y-1 max-h-[calc(100vh-200px)] overflow-y-auto pr-2">
          <div class="course-item active">
            <div class="flex items-center justify-between">
              <span>高等数学（上）</span>
              <span class="bg-white/30 text-white text-xs px-2 py-0.5 rounded-full">12</span>
            </div>
          </div>
          <div class="course-item">
            <span>大学物理</span>
          </div>
          <div class="course-item">
            <span>程序设计基础</span>
          </div>
          <div class="course-item">
            <div class="flex items-center justify-between">
              <span>线性代数</span>
              <span class="bg-primary/10 text-primary text-xs px-2 py-0.5 rounded-full">5</span>
            </div>
          </div>
          <div class="course-item">
            <span>概率论与数理统计</span>
          </div>
          <div class="course-item">
            <span>数据结构</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧问题列表 -->
    <div class="md:w-3/4 lg:w-4/5">
      <!-- 顶部筛选栏 -->
      <div class="bg-white rounded-xl p-4 shadow-sm mb-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
          <div class="flex items-center gap-2">
            <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium">最新提问</button>
            <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">热门问题</button>
            <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">已解决</button>
          </div>
          <div class="text-sm text-gray-500">
            高等数学（上）· 共32个问题
          </div>
        </div>
      </div>

      <!-- 问题列表 -->
      <div class="space-y-4">
        <!-- 问题卡片1 -->
        <div class="question-card">
          <div class="flex items-start justify-between">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/237/200" alt="用户头像" class="w-8 h-8 rounded-full">
              <div>
                <h3 class="font-medium text-dark">李同学</h3>
                <p class="text-xs text-gray-500">2小时前</p>
              </div>
            </div>
            <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">未解决</span>
          </div>
          
          <div class="mt-3">
            <h4 class="font-medium text-dark hover:text-primary transition-colors">关于洛必达法则的应用条件，这里为什么不能直接使用？</h4>
            <p class="text-gray-600 text-sm mt-2 line-clamp-2">
              这道题是求极限的题目，当x趋近于0时，分子分母都是0，我用了洛必达法则计算，但结果和标准答案不一样，想知道哪里出错了...
            </p>
            <div class="mt-2 flex items-center gap-2">
              <img src="https://picsum.photos/id/180/200" alt="问题图片" class="w-16 h-16 rounded object-cover border border-gray-100">
            </div>
          </div>
          
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm">
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-comment-o mr-1"></i> 3条回复
              </span>
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-eye mr-1"></i> 24
              </span>
            </div>
            <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">极限计算</span>
          </div>
        </div>

        <!-- 问题卡片2 -->
        <div class="question-card">
          <div class="flex items-start justify-between">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1027/200" alt="用户头像" class="w-8 h-8 rounded-full">
              <div>
                <h3 class="font-medium text-dark">王同学</h3>
                <p class="text-xs text-gray-500">昨天 18:30</p>
              </div>
            </div>
            <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">已解决</span>
          </div>
          
          <div class="mt-3">
            <h4 class="font-medium text-dark hover:text-primary transition-colors">定积分的几何应用中，求旋转体体积的步骤是什么？</h4>
            <p class="text-gray-600 text-sm mt-2 line-clamp-2">
              课本上的例题看不太懂，特别是关于如何确定积分区间和被积函数的部分，有没有同学能详细讲一下步骤？
            </p>
          </div>
          
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm">
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-comment-o mr-1"></i> 7条回复
              </span>
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-eye mr-1"></i> 42
              </span>
            </div>
            <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">定积分应用</span>
          </div>
        </div>

        <!-- 问题卡片3 -->
        <div class="question-card">
          <div class="flex items-start justify-between">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1012/200" alt="用户头像" class="w-8 h-8 rounded-full">
              <div>
                <h3 class="font-medium text-dark">赵同学</h3>
                <p class="text-xs text-gray-500">3天前</p>
              </div>
            </div>
            <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">已解决</span>
          </div>
          
          <div class="mt-3">
            <h4 class="font-medium text-dark hover:text-primary transition-colors">隐函数求导的技巧，如何快速确定求导步骤？</h4>
            <p class="text-gray-600 text-sm mt-2 line-clamp-2">
              对于复杂的隐函数，比如含有三角函数和指数函数的情况，求导时总是容易漏掉某些项，有没有系统的方法可以遵循？
            </p>
          </div>
          
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm">
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-comment-o mr-1"></i> 5条回复
              </span>
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-eye mr-1"></i> 36
              </span>
            </div>
            <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">隐函数求导</span>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="mt-6 text-center">
        <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
          加载更多 <i class="fa fa-angle-down ml-1"></i>
        </button>
      </div>
    </div>
  </main>

  <!-- 底部导航（移动端） -->
  <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 px-6 flex justify-around">
    <a href="#" class="flex flex-col items-center text-primary">
      <i class="fa fa-home text-lg"></i>
      <span class="text-xs mt-1">首页</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-book text-lg"></i>
      <span class="text-xs mt-1">课程</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-bell text-lg"></i>
      <span class="text-xs mt-1">通知</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-user text-lg"></i>
      <span class="text-xs mt-1">我的</span>
    </a>
  </div>

  <!-- 浮动提问按钮 -->
  <button class="fixed bottom-20 right-6 md:bottom-6 md:right-6 w-14 h-14 bg-primary rounded-full shadow-lg flex items-center justify-center text-white text-xl hover:bg-secondary transition-all transform hover:scale-110 z-40">
    <i class="fa fa-plus"></i>
  </button>
</body>
</html>